<template>
  <el-dialog
    v-dialogDrag:{dialogDrag}="dialogDrag"
    v-dialogChange:{dialogChange}="dialogChange"
    v-dialogTop:{dialogTop}="dialogTop"
    v-dialogLeft:{dialogLeft}="dialogLeft"
    :title="dialogTitle"
    :visible.sync="visible"
    :append-to-body="appendTobody"
    :close-on-click-modal="false"
    :fullscreen="fullscreen"
    :width="width"
    :height="height"
    :modal="modal"
    :show-close="showClose"
    :custom-class="customClass"
    class="dialogPublic"
    :lock-scroll="lockScroll"
    @close="doClose"
  >
    <template slot="title">
      <slot name="dialog-title"></slot>
    </template>
    <slot></slot>
    <div
      slot="footer"
      class="dialog-footer"
      ref="addReceptionForm"
      v-if="!noFootBtn"
    >
      <slot name="footer__btn"></slot>
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: {
    singleClose:{
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: "",
    },
    customClass: {
      type: String,
      default: "",
    },
    show: {
      type: Boolean,
      default: false,
    },
    appendTobody: {
      type: Boolean,
      default: false,
    },
    noFootBtn: {
      type: Boolean,
      default: false,
    },
    fullscreen: {
      type: Boolean,
      default: false,
    },
    showClose: {
      type: Boolean,
      default: true,
    },
    modal: {
      type: Boolean,
      default: true,
    },
    btnText: {
      type: Array,
      default: () => {
        return ["确定", "取消"];
      },
    },
    width: {
      type: String,
      default: "",
    },
    height: {
      type: String,
      default: "",
    },
    //拖动
    dialogDrag: {
      type: Boolean,
      default: true,
    },
    //拉伸
    dialogChange: {
      type: Boolean,
      default: false,
    },
    dialogTop:{
      type: Number,
      default:200
    },
    dialogLeft:{
      type: Number,
      default:0
    }
  },
  name: "dialogPublic",
  data() {
    return {
      dialogTitle: "标题",
      visible: false,
      lockScroll:false
    };
  },
  watch: {
    visible(val) {
      if (!val) {
        this.$emit("update:show", false);
      } else {
        this.resizeHeight();
      }
    },
    show: {
      immediate: true,
      handler(show) {
        this.init();
      },
    },
  },
  created() {
    this.init();
  },
  mounted() {
    // this.init();
    // this.resizeHeight();
  },
  methods: {
    init() {
      (this.dialogTitle = this.title), (this.visible = this.show);
    },
    doSubmit() {
      this.$emit("doSubmit", true);
    },
    doClose() {
      this.$emit("doClose", true);
    },
    //重置高度
    resizeHeight() {
      if (!this.fullscreen) {
        this.$nextTick(() => {
          let bH = document.body.clientHeight;
          let bW = document.body.clientWidth;
          let dialog = document.getElementsByClassName("el-dialog");
          let diglogH = dialog[0].clientHeight;
          let diglogW = dialog[0].clientWidth;

          let dialogBody = document.getElementsByClassName("el-dialog__body");
          let diglogBodyH = dialog[0].clientHeight;
          let diglogBodyW = dialog[0].clientWidth;

          if (this.height) {
            dialogBody[0]["style"].height = this.height;
            return;
          }

          if (diglogH > bH * 0.8) {
            let h = bH * 0.8;
            dialog[0]["style"].height = h + "px";
          }

          if (diglogBodyH < bH * 0.45) {
            let h = bH * 0.45;
            dialogBody[0]["style"].height = h + "px";
          }

          if (bW < 1366) {
            dialog[0]["style"].width = bW * 0.8 + "px";
          }
        });
      }
    },
  },
};
</script>

<style lang="less" scoped>
.dialogPublic {
  .dialog-footer__btn {
    letter-spacing: 2px;
  }
  .is-fullscreen {
    width: 95%;
    height: 95%;
    overflow: auto;
    margin-top: 1%;
    position: relative;
  }
 /*  .el-dialog{
    border-radius: 8px;
}
.el-dialog .el-dialog__header{
    font-size: 18px;
    font-weight: 500;
    color: @kr-text-dark-color;
    background: @kr-white-color;
}
.dialog-footer__btn{
    background-color:@kr-table-head-color;
    height:40px!important;
    padding: 12px 54px!important;
    margin: 0 12px!important;
    font-size: 16px;
} */
  /deep/ .el-dialog {
    border-radius:8px ;
    font-family:  Noto Sans SC;
    font-style: normal;
    font-weight: 400;
    .el-dialog__header {
      height: 50px;
      padding: 10px;
      border-bottom: 1px solid #f3f3f4;
      text-align: left;
      font-size: 18px;
      font-weight: 500;
      color: @kr-text-dark-color;
      background-color: @kr-white-color;
      border-radius: 8px;
    }
    .el-dialog__headerbtn .el-dialog__close {
      color: @kr-text-color;
      font-size: 19px;
    }
    .el-dialog__body {
      padding: 30px 20px;
      text-align: left;
      overflow-y: auto;
      // max-height: calc(100% - 99px);
      // min-height: 200px;
    }
    .is-fullscreen .el-dialog__body {
      height: calc(100% - 101px) !important;
    }

    .el-dialog__footer {
      height: auto;
      text-align: right;
      padding: 10px;
      border-top: 1px solid #f3f3f4;
      width: 100%;
    //   .dialog-footer__btn{
    //     height:40px!important;
    //     padding: 12px 27px!important;
    //     margin: 0 12px!important;
    //     font-size: 16px;
    //   }
    }
  }
  .dialog-footer{
    text-align:right;
  }
}
.dialogAllHeight .el-dialog__body {
  height: calc(100% - 50px) !important;
}
</style>